<template>
    <div class="game-card-list" v-loading="loading">
        <div class="input-box">
            <span class="input-title" style="margin-left:0px;">游戏单名称</span>
            <el-input style="width: 200px;" clearable v-model.trim="keyWord" @keyup.enter.native="getList(1)"></el-input>
            <span class="input-title">状态</span>
            <el-select
                @change="selectChange"
                style="width:150px;"
                v-model="auditstatus">
                <el-option label="全部" :value="99"></el-option>
                <el-option label="自动审核通过" :value="1"></el-option>
                <el-option label="人工审核通过" :value="2"></el-option>
                <el-option label="人工审核下架" :value="-1"></el-option>
            </el-select>

            <span class="input-title">查看权限</span>
            <el-select
                @change="selectChange"
                style="width:150px;"
                v-model="showtype">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="所有人可见" :value="1"></el-option>
                <el-option label="仅自己" :value="0"></el-option>
            </el-select>
            <!-- <span class="input-title">参与投稿</span>
            <el-select
                @change="getList(1)"
                style="width:100px;"
                v-model="sourceFrom">
                <el-option label="全部" value="全部"></el-option>
            </el-select> -->
            <!-- <span class="input-title">征集活动</span>
            <el-select
                @change="getList(1)"
                style="width:140px;"
                v-model="status">
                <el-option label="全部" :value="999"></el-option>
            </el-select> -->
            <el-button type="success" class="btn" @click="getList(1)">搜索</el-button>
        </div>

        <div class="table-box">
            <el-table
                :data="tableData"
                ref="table"
                @sort-change="sortChange"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    width="100"
                    prop="listId"
                    label="id">
                </el-table-column>
                <el-table-column
                    min-width="100"
                    label="游戏单封面">
                    <template slot-scope="scope">
                        <imgBox :url="scope.row.cover" :width="80"/>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="150"
                    prop="title"
                    label="游戏单名称">
                </el-table-column>
                <el-table-column
                    min-width="300"
                    label="游戏单简介">
                    <template slot-scope="scope">
                        <div class="desc">{{scope.row.desc || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="150"
                    label="推荐游戏">
                    <template slot-scope="scope">
                        <div v-if="scope.row.userGameListGameInfoList && scope.row.userGameListGameInfoList.length">
                            <div v-for="(item, index) in scope.row.userGameListGameInfoList" :key="index"  class="table-btn">
                                <span>{{index + 1}}.</span>
                                <span @click="goGameDetail(item.gameId)">{{item.gameName}}</span>
                            </div>
                        </div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="100"
                    label="发布者">
                    <template slot-scope="scope">
                        <div class="table-btn" @click="goUserDetail(scope.row.userid)">{{scope.row.userName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="100"
                    label="查看权限">
                    <template slot-scope="scope">
                        <div v-if="scope.row.showtype === 1" style="color: #67C23A;">所有人可见</div>
                        <div v-else style="color: #F56C6C;">仅自己</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="发布时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.createtime | timeInit}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    min-width="100"
                    prop="commentnum"
                    label="评论数">
                    <template slot-scope="scope">
                        <span>{{scope.row.commentnum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    min-width="100"
                    prop="followNum"
                    label="关注数">
                    <template slot-scope="scope">
                        <span>{{scope.row.followNum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    min-width="100"
                    prop="thumbsnum"
                    label="喜欢数">
                    <template slot-scope="scope">
                        <span>{{scope.row.thumbsnum || '0'}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    label="参与投稿">
                    <template slot-scope="scope">
                    </template>
                </el-table-column> -->
                <el-table-column
                    prop="auditstatus"
                    width="150"
                    fixed="right"
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.auditstatus === -1">
                            <div class="point red-point"></div>
                            <span>人工审核下架</span>
                        </div>
                        <div style="color:#67C23A;" v-else-if="scope.row.auditstatus === 2">
                            <span class="point"></span>
                            <span>人工审核通过</span>
                        </div>
                        <div v-else>自动审核通过</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditstatus !== -1"><el-button @click="changeGameCardStatus(scope.row, -1)" type="text" size="small" style="color: #F56C6C;">下架</el-button></div>
                        <div v-if="scope.row.auditstatus !== 2"><el-button @click="changeGameCardStatus(scope.row, 2)" type="text" size="small" style="color: #67C23A;">通过</el-button></div>
                        <div><el-button @click="goGameCardDetail(scope.row.listId)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            auditstatus: 99, // 状态
            showtype: -1,
            keyWord: '',
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false
        }
    },

    activated () {
        this.getList(this.pageNum)
    },

    methods: {
        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            this.listParams = {
                pageNum: pageNum,
                pageSize: this.pageSize,
                keyWord: this.keyWord
            }
            if (this.auditstatus !== 99) {
                this.listParams.auditStatus = this.auditstatus
            }
            if (this.showtype >= 0) {
                this.listParams.showType = this.showtype
            }
            if (this.sort) {
                this.listParams.sort = this.sort
            }

            if (this.type) {
                this.listParams.type = this.type
            }
            let res = await this.$http.get('/gameList/selectUserGameList', {
                params: this.listParams
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 后端排序
        sortChange ({ column, prop, order }) {
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = ''
            } else {
                this.type = prop
            }
            this.getList(1)
        },

        selectChange () {
            this.type = ''
            this.sort = ''
            this.$refs.table.clearSort()
            this.getList(1)
        },

        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        // 更改视频状态
        async changeGameCardStatus (item, status) {
            // 审核:-1审核不通过0审核中1审核通过 2下架 3上架
            let params = {
                id: item.listId,
                status
            }
            let res = await this.$http.get('/gameList/updateUserGameListStatus', {
                params
            })
            if (res.code === '0') {
                item.auditstatus = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 查看游戏单详情
        goGameCardDetail (id) {
            const { href } = this.$router.resolve({
                path: '/gameCard/detail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 查看游戏详情
        goGameDetail (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '至今'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-card-list {
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 10px;
            }
        }

        .table-box {
            margin: 20px 0;
            .desc {
                overflow: hidden;
                line-height: 20px;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                height: 100px;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
